<%--
  Created by IntelliJ IDEA.
  User: MSH
  Date: 2018-12-30
  Time: 11:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
    #mymap{
        height: 400px;
        width: 500px;
    }
</style>
<html>
<head>
    <title>供应商</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp"/>
    <!--启用较验-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrapvalidator/bootstrapValidator.min.css">
    <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/bootstrapValidator.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrapvalidator/zh_CN.js"></script>
    <!--sweet提示框-->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/hplus/css/plugins/sweetalert/sweetalert.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/hplus/js/plugins/sweetalert/sweetalert.min.js"></script>
    <!--百度地图-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=x4GWag386iWUaZ6PVMEOSqLrkUWr4OE8"></script>

</head>
<body>

<%--添加模态框--%>
<div class="modal inmodal" id="addmodal">
    <div class="modal-dialog">
        <form class="form-horizontal" id="userform" method="post" role="form">
            <input type="hidden" name="pn">
            <div class="modal-content animated bounceInLeft">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" >
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">供应商增加</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-4 text-right">供应商名称：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name" placeholder="供应商名称"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">供应商电话：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="phone" placeholder="供应商电话"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">供应商地址：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="address" placeholder="供应商地址"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">备注：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="note" placeholder="备注"/>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="doAdd()">添加</button>

                </div>
            </div>
        </form>
    </div>
</div>

<div class="modal inmodal" id="myModal" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span>
                </button>
                <i class="fa fa-laptop modal-icon"></i>
                <h4 class="modal-title">位置信息</h4>
            </div><small class="font-bold">
            <div class="modal-body">
                <div id="mymap"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </small></div><small class="font-bold">
    </small></div><small class="font-bold">
</small></div>

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">供用商</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-6">
                    <button onclick="toadd()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
                    <button onclick="delRoom()" class="btn btn-primary"><span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;删除</button>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <table id="usertb"></table>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
<script type="text/javascript">

    $(function () {
        $("#usertb").bootstrapTable({
            url:'${pageContext.request.contextPath}/supplier/cha',
            toolbar:'#dtn',//工具按钮用哪个容器
            striped: true,//隔行换色
            showRefresh: true,//是否显示刷新按钮
            height: 500,//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id",//每一行的唯一标识，一般为主键列
            showToggle:true,//是否显示详细视图和列表视图的切换按钮
            //detailView:true,//是否显示父子表
            pagination:true, //是否显示分页（*）
            pageSize : 4,//单页记录数
            pageList : [ 5, 10, 20, 30 ],//可选择单页记录数
            /* sidePagination:"server",//分页方式：client客户端分页，server服务端分页（*）
             queryParams: function (params) {
             var temp = {
                 limit : params.limit,
                 offset : params.offset
             }
             return temp;
             },*/
            columns:[
                {checkbox: true},
                {field: 'id', title: '供应商编号'},
                {field: 'name', title: '供应商名称'},
                {field: 'phone', title: '供应商电话'},
                {field: 'address', title: '供应商地址'},
                {field: 'note', title: '备注'},
                {
                    title:'操作',
                    formatter:function(value,row,index){
                         return "<button onclick=openmap('"+row.address+"')  type='button' class='btn btn-primary' data-toggle='modal' data-target='#myModal'>\n" + " <i class='fa fa-map-marker'></i> &nbsp;&nbsp;位置\n + </button>&nbsp;&nbsp;&nbsp;<button class='btn  btn-primary' onclick='toxiugai(("+index+"))'><span class='glyphicon glyphicon-pencil'></span>&nbsp;修改</button>";
                    }
                },
            ]
        });
    });

    //打开添加对话框
    function toadd() {
        //清空文本框
        $("#addform [name='name']").val("");
        $("#addform [name='phone']").val("");
        $("#addform [name='address']").val("");
        $("#addform [name='note']").val("");
        $("#addmodal").modal("show");

    }

    $(function () {
        <!--校验框架-->
        $('#addmodal').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields:{
                supplier:{
                    message: 'The name is not valid',
                    validators:{
                        notEmpty:{//检测非空，radio也可用
                            message:'文本框必须输入'
                        },

                    }
                },
            }
        });
    });
    //进行增加用户
    function doAdd(){
        //启用校验
        $('#addmodal').data('bootstrapValidator').validate();
        //验证是否通过true/false
        var flag=$('#addmodal').data("bootstrapValidator").isValid();
        if(flag){
            //绑定当前页开始
            var options=$('#usertb').bootstrapTable('getOptions');//返回表格的 Options
            //得到当前页
            var pn=options.pageNumber;
            $("input[name='pn']").val(pn);
            //序列化表单
            var formStr=$('#userform').serialize();
            //处理表单控件的中文乱码
            addsave=decodeURIComponent(formStr,true);
            alert(addsave)
            // send ajax
            $.ajax({
                'url':'/supplier/add',
                'type':'post',
                'data':addsave,
                success:function(data){
                    //关闭对话框
                    $("#addmodal").modal('hide');
                    //重新加载表格
                    $("#usertb").bootstrapTable('load',data);
                    //提高增加成功
                    swal("提示信息","增加成功！","success");
                }
            });
        }
    };
    //删除
    function delRoom(id) {
        var ids = "" ;

        //1.得到要删除的行
        //返回所选的行，当没有选择任何行的时候返回一个空数组。
        var rows = $("#usertb").bootstrapTable("getSelections") ;
        if (rows.length==0){
            alert("请选择要删除的数据！") ;
        }
        else{
            $.each(rows,function (index,row) {
                ids = ids + row.id + "-";
                alert(ids)

            }) ;
            swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                //得到当前页
                //绑定当前页开始
                //var options = $("#roominfotb").bootstrapTable('getOptions') ;
                //得到当前页
                //var pn = options.pageNumber ;
                $.post("/supplier/dele",{'ids': ids},function(data){
                    //友好的提示
                    swal({title:"删除成功！",
                            text:"您已经永久删除了这条数据。",
                            type:"success"},
                        //刷新页面
                        function(){window.location=""});

                })

            });
        }
    }
    //打开修改对话框,回传要修改行的数据
    function toxiugai(index) {
        //取消所有选择
        $("#usertb").bootstrapTable("uncheckAll");
        //选中要修改的行
        $("#usertb").bootstrapTable("check", index);

        //得到所选行的数据
        var row = $("#usertb").bootstrapTable("getSelections")[0];
        //绑定主键
        $("input[name='id']").val(row.id);
        //绑定当前页开始
        var options = $("#usertb").bootstrapTable('getOptions') ;
        //得到当前页
        var pn = options.pageNumber ;
        //绑定当前页
        // $("input[name='pn']").val(pn) ;
        $("input[name='name']").val(row.name);
        $("input[name='phone']").val(row.phone);
        $("input[name='address']").val(row.address);
        $("input[name='note']").val(row.note);
        //.打开对话框
        $("#toxiugaimodal").modal("show");

    }
    function doxiugai(){
        //.
        var params = $("#userxiugaiform").serialize();
        //处理表单控件的中文乱码
        params = decodeURIComponent(params,true);
        $.ajax({
            'type':'post',
            'url':'/supplier/upsupplier',
            'data':params,
            success:function(data){
                //关闭对话框
                $("#toxiugaimodal").modal('hide') ;
                //友好的提示
                swal("提示信息", "修改成功!", "success");
                //重新加载表格
                $("#usertb").bootstrapTable('load',data) ;

            }
        })
    }

    function openmap(address) {
        // 创建地图实例
        var map = new BMap.Map("mymap");
        // 创建点坐标
        var point = new BMap.Point(114.48269393, 36.60930793);
        // 初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 15);
        //
        var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
        var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
        var top_right_navigation = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_SMALL
        }); //右上角，仅包含平移和缩放按钮
        map.addControl(top_left_control);
        map.addControl(top_left_navigation);
        map.addControl(top_right_navigation);

        // 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint(address, function (point) {

            if (point) {
                map.centerAndZoom(point, 16);
                map.addOverlay(new BMap.Marker(point));
            } else {
                alert("您选择地址没有解析到结果!");
            }
        }, "邯郸市");

    }
</script>
<div  class="modal inmodal" id="toxiugaimodal">
    <div class="modal-dialog">
        <form class="form-horizontal" id="userxiugaiform"  method="post" role="form">

            <input type="hidden" name="id">
            <input type="hidden" name="pn">
            <div class="modal-content animated bounceInLeft">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">修改供用商</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-4 text-right" for="name">供应商名称</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name"  placeholder="供应商名称" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="phone" class="col-sm-4 text-right">供应商电话</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="phone"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="address" class="col-sm-4 text-right">供用商地址</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="address"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="note" class="col-sm-4 text-right">备注</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="note"  />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                        <button onclick="doxiugai()" type="button" class="btn btn-primary">修改</button>
                    </div>